<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

<nav data-th-fragment="page" data-th-if="${page.total gt 0}" data-th-object="${page}">

    <!-- 处理页数小于等于7 的情况 -->
    <ul class="pagination" data-th-if="${page.pages le 7}">
        <!-- 总记录数 -->
        <li class="tbpage-total-elements disabled">共[[${page.total}]]条</li>

        <!-- 页面大小 -->
        <select class="custom-select tbpage-size" data-th-attr="pageSize=${page.pageSize}">
            <option data-th-each="i : ${#arrays.toIntegerArray({1, 3, 5,10,40,100})}" data-th-value="${i}"
                    data-th-selected="${i eq page.pageSize}" data-th-text="${i}"></option>
        </select>


        <!-- 上一页 -->
        <li class="page-item" data-th-classappend="${page.isFirstPage} ? 'disabled' : ''">
            <a href="javascript:void(0);" class="page-link tbpage-item" data-th-attr="pageNum=${page.prePage}"
               aria-label="Previous">
                <span aria-hidden="true">«</span>
            </a>
        </li>

        <!-- 迭代生成页码 -->
        <li class="page-item" data-th-each="i : ${#numbers.sequence(1, page.pages)}"
            data-th-classappend="${page.pageNum eq i} ? 'active' : ''">
            <a class="page-link tbpage-item" data-th-attr="pageNum=${i}" href="javascript:void(0);">
                <span data-th-text="${i}"></span>
            </a>
        </li>


        <!-- 下一页 -->
        <li class="page-item" data-th-classappend="${page.isLastPage} ? 'disabled' : ''">
            <a href="javascript:void(0);" class="page-link tbpage-item" data-th-attr="pageNum=${page.nextPage}"
               aria-label="Next">
                <span aria-hidden="true">»</span>
            </a>
        </li>
    </ul>


    <!-- 处理页数大于7 的情况 -->
    <ul class="pagination" data-th-if="${page.pages gt 7}">
        <!-- 总记录数 -->
        <li class="tbpage-total-elements disabled">共[[${page.total}]]条</li>

        <!-- 页面大小 -->
        <select class="custom-select tbpage-size" data-th-attr="pageSize=${page.pageSize}">
            <option data-th-each="i : ${#arrays.toIntegerArray({1, 5,10,40,100})}" data-th-value="${i}"
                    data-th-selected="${i eq page.pageSize}" data-th-text="${i}"></option>
        </select>

        <!-- 上一页 -->
        <li class="page-item" data-th-classappend="${page.isFirstPage} ? 'disabled' : ''">
            <a href="javascript:void(0);" class="page-link tbpage-item" data-th-attr="pageNum=${page.prePage}"
               aria-label="Previous">
                <span aria-hidden="true">«</span>
            </a>
        </li>

        <!-- 首页 -->
        <li class="page-item" data-th-classappend="${page.pageNum eq 1} ? 'active' : ''">
            <a href="javascript:void(0);" class="page-link tbpage-item" data-th-attr="pageNum=0">1</a>
        </li>


        <!-- 当前页面小于等于4 -->
        <li class="page-item" data-th-if="${page.pageNum le 4}" data-th-each="i : ${#numbers.sequence(2,5)}"
            data-th-classappend="${page.pageNum eq i} ? 'active' : ''">
            <a class="page-link tbpage-item" href="javascript:void(0);" data-th-attr="pageNum=${i}">
                <span data-th-text="${i}"></span>
            </a>
        </li>

        <li class="page-item disabled" data-th-if="${page.pageNum le 4}">
            <a href="javascript:void(0);" class="page-link tbpage-item">
                <span aria-hidden="true">...</span>
            </a>
        </li>

        <!-- 最后一页与当前页面之差，小于等于3 -->
        <li class="page-item disabled" data-th-if="${(page.pages-page.pageNum) le 3}">
            <a href="javascript:void(0);" class="page-link tbpage-item">
                <span aria-hidden="true">...</span>
            </a>
        </li>
        <li class="page-item" data-th-if="${(page.pages-page.pageNum) le 3}"
            data-th-each="i : ${#numbers.sequence(page.pages-3, page.pages-1)}"
            data-th-classappend="${page.pageNum eq i} ? 'active' : ''">
            <a class="page-link tbpage-item" href="javascript:void(0);" data-th-attr="pageNum=${i}">
                <span data-th-text="${i}"></span>
            </a>
        </li>

        <!-- 最后一页与当前页面之差大于3，且当前页面大于4-->

        <li class="page-item disabled"
            data-th-if="${(page.pageNum gt 4) && ((page.pages - page.pageNum) gt 3 )}">
            <a href="javascript:void(0);" class="page-link tbpage-item">
                <span aria-hidden="true">...</span>
            </a>
        </li>
        <li class="page-item active" data-th-if="${(page.pageNum gt 4) && ((page.pages-page.pageNum) gt 3 )}">
            <a href="javascript:void(0);" class="page-link tbpage-item" data-th-attr="pageNum=${page.pageNum}">[[${page.pageNum}]]</a>
        </li>
        <li class="page-item"
            data-th-if="${(page.pageNum gt 4) && ((page.pages - page.pageNum) gt 3 )}">
            <a href="javascript:void(0);" class="page-link tbpage-item" data-th-attr="pageNum=${page.pageNum + 1}">[[${page.pageNum
                + 1}]]</a>
        </li>
        <li class="page-item" data-th-if="${(page.pageNum gt 4) && ((page.pages-page.pageNum) gt 3 )}">
            <a href="javascript:void(0);" class="page-link tbpage-item" data-th-attr="pageNum=${page.pageNum} + 2">[[${page.pageNum
                + 2}]]</a>
        </li>

        <li class="page-item disabled"
            data-th-if="${(page.pageNum gt 4) && ((page.pages-page.pageNum) gt 3 )}">
            <a href="javascript:void(0);" class="page-link tbpage-item">
                <span aria-hidden="true">...</span>
            </a>
        </li>

        <!-- 最后一页 -->
        <li class="page-item" data-th-classappend="${page.pageNum eq page.pages} ? 'active' : ''">
            <a href="javascript:void(0);" class="page-link tbpage-item" data-th-attr="pageNum=${page.pages}">[[${page.pages}]]</a>
        </li>

        <!-- 下一页 -->
        <li class="page-item" data-th-classappend="${page.isLastPage} ? 'disabled' : ''">
            <a href="javascript:void(0);" class="page-link tbpage-item" data-th-attr="pageNum=${page.nextPage}"
               aria-label="Next">
                <span aria-hidden="true">»</span>
            </a>
        </li>
    </ul>

</nav>

</body>
</html>